import React, { Component, Fragment } from "react";
import { connect } from "dva";
import { 
  Table,
  Row,
  Col,
  Button,
  Modal,
} from "antd";
import SettingForm from '../components/SettingForm';
import BuyForm from '../components/BuyForm';
import styles from "./IndexPage.css";
const ButtonGroup = Button.Group;

class IndexPage extends Component {
  render(){
    const { dispatch, indexPage } = this.props;
    const stockholdsColumns = [{
      title : "股票代码",
      dataIndex : "code",
      align : "center",
      key : "code",
    }, {
      title : "股票名称",
      dataIndex : "name",
      align : "center",
      key : "name",
    }, {
      title : "持仓手数",
      dataIndex : "num",
      align : "center",
      key : "num",
    }, {
      title : "买入时间",
      dataIndex : "time",
      align : "center",
      key : "time",
    }, {
      title : "买入价格",
      dataIndex : "price",
      align : "center",
      key : "price",
    }, {
      title : "当前价格",
      dataIndex : "nowprice",
      align : "center",
      key : "nowprice",
    }, {
      title : "动态权益",
      dataIndex : "money",
      align : "center",
      key : "money",
    }];
    const signalsColumns = [{
      title : "股票代码",
      dataIndex : "code",
      align : "center",
      key : "code",
      className : styles.column
    }, {
      title : "股票名称",
      dataIndex : "name",
      align : "center",
      key : "name",
      className : styles.column
    }, {
      title : "数量（手）",
      dataIndex : "num",
      align : "center",
      key : "num",
      className : styles.column
    }, {
      title : "价格",
      dataIndex : "price",
      align : 'center',
      key : "price",
      className : styles.column
    }, {
      title : "需要金额",
      dataIndex : "money",
      align : "center",
      key : "money",
      className : styles.column
    }, {
      title : "信号发起时间",
      dataIndex :"time",
      align : "center",
      key : "time",
      className : styles.column
    }, {
      title : "操作",
      dataIndex : "signal",
      key : "signal",
      align : "center",
      width : "132px",
      render : (text, record) => {
        const operation = (opt) => {
          dispatch({ type : 'indexPage/showBuyModal', payload : opt })
        }
        const ignore = (opt) => {
          dispatch({ type : "indexPage/ignore" , payload : opt })
        }
        return (
          <ButtonGroup size="small">
            {
              text === 0 ? 
              <Button style={{
                background : "#a0d468",
                color : "#fff",
                borderColor : "#8cc152"
              }} onClick={()=>operation(record)}>卖出</Button> :
              <Button type="primary" onClick={()=>operation(record)}>买入</Button>  
            }
            <Button type="danger" onClick={()=>ignore({code : record.code })}>忽略</Button>
          </ButtonGroup>
        )
      },
      className : styles.column 
    }]
    const { 
      stockholds,
      signals,
      info : {
        allmoney=0,
        freemoney=0,
        dynamicrights=0,
        oneStockMoney=0
      },
      SettingShow,
      buyShow,
      loading,
      modalOpt,
    } = indexPage;
    const modelProps = {
      allmoney : allmoney,
      freemoney : freemoney,
      dynamicrights : dynamicrights,
      oneStockMoney : oneStockMoney,
      onOk : (params) => dispatch({
        type : 'indexPage/settingMoney',
        payload : params
      }),
      onCancel : () => dispatch({
        type : 'indexPage/hideModal'
      })
    }
    const buyProps = {
      ...modalOpt,
      onOk : (params) => dispatch({
        type : 'indexPage/buyOrSale',
        payload : params
      }),
      onCancel :()=>dispatch({
        type : 'indexPage/hideBuyModal'
      })
    }
    return (
      <Fragment>
        <div className={styles.header}>
          <span> 全部金额：{allmoney} </span> | 
          <span> 可用余额：{freemoney} </span> | 
          <span> 动态权益：{dynamicrights} </span> |
          <span> 单股最大可用金额：{oneStockMoney} </span> |
          <Button 
            type="primary"
            onClick={()=>dispatch({
              type : 'indexPage/showModal'
            })}>修改</Button>
        </div>
        <div className={ styles.content }>
          <Row gutter={12}>
            <Col md={12} sm={24}>
              <h3 className={ styles.tableTitle }>持仓列表</h3>
              <Table
                dataSource={stockholds}
                columns={stockholdsColumns}
                rowKey={(record)=>record.code}
                bordered={true}
                align="center"
                pagination={false}
                loading={loading}
                rowClassName={(record,index)=>{
                  if(record.nowprice > record.price){
                    return styles.up
                  }else if(record.nowprice < record.price){
                    return styles.down
                  }else {
                    return styles.column
                  }
                }}
              />
            </Col>
            <Col md={12} sm={24}>
              <h3 className={ styles.tableTitle }>策略信号</h3>
              <Table
                loading={loading}
                dataSource={signals}
                columns={signalsColumns}
                rowKey={(record)=>record.code}
                bordered={true}
                pagination={false}
              />
            </Col>
          </Row>
          <Modal
            destroyOnClose
            footer={null}
            visible={SettingShow}
            onCancel={()=>dispatch({
              type : 'indexPage/hideModal'
            })}
          >
            <SettingForm {...modelProps}/>
          </Modal>
          <Modal 
            destroyOnClose
            footer={null}
            visible={buyShow}
            onCancel={()=>dispatch({
              type : 'indexPage/hideBuyModal'
            })}
          >
            <BuyForm {...buyProps}/>
          </Modal>
        </div>
      </Fragment>
    );
  }
}
export default connect(({ indexPage }) => ({ indexPage }))(IndexPage);
